<template>
    <div class="app-container">

        <div class="top-box clearfix">
            <div class="top-left clearfix"></div>
            <div class="top-right clearfix">
                <el-button type="primary" @click="toAdd()">添加</el-button>
            </div>
        </div>
        <div class="role-table-box">
            <table class="z-table" style="width: 100%">
                <thead>
                <tr>
                    <th style="width: 150px">ID</th>
                    <th>名称</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="r in roles">
                    <td>{{r.id}}</td>
                    <td>{{r.name}}</td>
                    <td>{{r.remark}}</td>
                    <td>
                        <a class="z-label success" @click="toAllocate(r.id)">资源分配</a>
                        <a class="z-label" @click="toEdit(r.id)">编辑</a>
                        <a class="z-label danger" @click="toDelete(r)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>


            <!--
            <div class="pagination-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageBean.pageCount"
                    :page-sizes="[10, 20, 30, 50,80]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageBean.total">
                </el-pagination>
            </div>-->
        </div>
    </div>
</template>

<script>
    import '@/styles/form-box.css'
    import roleApi from '../../api/role'
    import {Message, MessageBox} from 'element-ui'
    //components
    import httpMethod from '@/components/HttpMethod/index'

    const statusMap = {
        '0':'开放',
        '1':'监控',
        '2':'禁用'
    }
    export default {
        name: "role-manager",
        data:function () {
            return {
                roles:[],
                statusMap:statusMap
            }
        },
        methods:{
            toAdd:function () {
                this.$router.push({path:'/security/role-manager-add'})
            },
            toEdit:function (id) {
                this.$router.push({path:'/security/role-manager-edit/'+id})
            },
            refresh:function () {
                //加载所有role
                const _this = this;
                roleApi.findAll()
                    .then(function (data) {
                        _this.roles = data;
                    })
            },
            toDelete:function (r) {
                if (r.id == 1){
                    Message.error('ID 为 1 的角色为超级权限管理员，不可删除');
                    return ;
                }
                const _this = this;
                MessageBox.confirm('确认删除该角色?', '确定删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    roleApi.deleteById(r.id)
                        .then(function (data) {
                            console.log(data)
                            if (data.success){
                                Message.success('删除成功')
                                _this.refresh()
                                return
                            }
                            Message.error('删除失败')
                        }).catch(function () {
                            Message.error('删除失败')
                        })
                })

            },
            toAllocate:function (roleId) {
                this.$router.push('/security/role-manager-allocate/'+roleId)
            }
        },
        mounted:function () {
            this.refresh()
        },
        components:{
            'http-method':httpMethod
        }
    }
</script>

<style scoped>

</style>
